<template>
  <div class="comment">
    <h1>评论</h1>
    <el-row>
      <el-col :span="18">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="value"
        >
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="comment">评论</el-button>
      </el-col>
    </el-row>
    <ul class="comment-li" v-for="(item, index) in comments" :key="item.id">
      <li>
        <el-row>
          <el-col :xs="4" :md="2">
            <el-avatar :src="item.avatar"></el-avatar>
          </el-col>
          <el-col :xs="20" :md="22" class="comment-item">
            <div class="nickname">
              <span>{{ item.nickname }}</span>
            </div>
            <div class="time">
              <span>第{{ comments.length - index }}楼</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ item.createTime | dateFormat }}</span>
              <el-divider direction="vertical"></el-divider>
              <span>{{ item.ip }}</span>
            </div>
            <div class="content">
              <p>{{ item.content }}</p>
            </div>
            <div class="reply">
              <ul v-for="(item1, index1) in item.replyList" :key="item1.id">
                <li>
                  <div class="comment-reply">
                    <el-row>
                      <el-col :xs="5" :md="2">
                        <el-avatar :src="item1.avatar"></el-avatar>
                      </el-col>
                      <el-col :xs="19" :md="22">
                        <div class="nickname">
                          <span>{{ item1.nickname }}</span>
                        </div>
                        <div class="time">
                          <span>{{ item1.createTime | dateFormat }}</span>
                          <el-divider direction="vertical"></el-divider>
                          <span>{{ item1.ip }}</span>
                        </div>
                        <div class="content">
                          <!-- 直接对一级评论回复显示 -->
                          <p v-if="item1.replyId">
                            <span class="reply-color">
                              {{ "@" + item1.replyNickname }}</span
                            >
                            <span> {{ item1.content }}</span>
                          </p>
                          <p v-else>
                            {{ item1.content }}
                          </p>
                        </div>
                        <div class="reply-button">
                          <el-button type="text" @click="open(index, index1)"
                            >回复</el-button
                          >
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </li>
              </ul>
            </div>
            <div class="reply-button">
              <el-button type="text" @click="open(index)">回复</el-button>
            </div>
          </el-col>
        </el-row>
        <div v-show="item.flag">
          <el-input
            type="textarea"
            :rows="6"
            :placeholder="placeholder"
            v-model="replyContent"
          >
          </el-input>
          <el-button type="text" @click="reply(index)">提交</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [],
      value: "",
      replyContent:"",
      currentIndex: 999,
      placeholder: "请输入内容",
      replyForm: {
        replyId: "",
        content: "",
        articleId: this.articleid,
        parentCommentId: "",
      },
    };
  },
  methods: {
    init() {
      this.getRequest(`/api/comment/comments/` + this.articleid).then((res) => {
        this.comments = res.data;
        console.log(this.comments);
      });
    },
    comment() {
      let comment = {
        content: this.value,
        articleId: this.articleid,
      };
      this.postRequest("/api/comment/comments", comment).then((res) => {
        this.value = "";
        this.init();
      });
    },
    open(index, childIndex) {
      // 对子评论回复有设id
      if (childIndex >= 0) {
        let parentComment =
          this.comments[parseInt(index)].replyList[parseInt(childIndex)];
        this.placeholder = "回复" + parentComment.nickname;
        // 设置对谁评论
        this.replyForm.replyId = parentComment.userId;
      } else {
        this.placeholder = "回复" + this.comments[parseInt(index)].nickname;
      }
      // 设置父级评论
      this.replyForm.parentCommentId = this.comments[parseInt(index)].id;
      this.currentIndex = index;
    },
    reply() {
      this.replyForm.content = this.replyContent;
      this.postRequest("/api/comment/comments", this.replyForm).then((res) => {
        this.replyContent = "";
        (this.replyForm = {
          replyId: "",
          content: "",
          articleId: this.articleid,
          parentCommentId: "",
        }),
          (this.currentIndex = 999);
        this.init();
      });
    },
  },
  props: {
    articleid: {
      type: Number,
      require: true,
    },
  },
  created() {
    this.init();
  },
  watch: {
    currentIndex(newValue, oldValue) {
      if (oldValue != 999) {
        this.comments[parseInt(oldValue)].flag = false;
      }
      if (newValue != 999) {
        this.comments[parseInt(newValue)].flag = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin: 48px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.time {
  color: #b3b3b3;
}
.comment-item {
  position: relative;
}

.time {
  margin-top: 5px;
}

.reply-button {
  position: absolute;
  right: 0;
  top: 0;
}
.avatar {
  width: 80%;
  overflow: hidden;
  border-radius: 50%;
}
.comment-li {
  margin-top: 40px;
}
.reply-color {
  color: #409eff;
}
</style>